<template>
  <div>
    <span class="countdown font-mono text-2xl">
      <span
        :style="`--value: ${timer?.hour}`"
        aria-live="polite"
        aria-label="10"
      ></span>
      :
      <span
        :style="`--value: ${timer?.minutes}`"
        aria-live="polite"
        aria-label="24"
      ></span>
      :
      <span
        :style="`--value: ${timer?.second}`"
        aria-live="polite"
        aria-label="59"
      ></span>
    </span>
  </div>
</template>
<script setup lang="ts">
import { useTimer } from "~/composables/study/useTime";
import { timeSet } from "~/composables/common/time";
import {toast} from "vue-sonner";
const { startTimer, resetSeconds, seconds, pauseTimer } = useTimer();
const { getTime } = timeSet();
function handleVisibilityChange() {
  if (document.visibilityState === "visible") {
    toast.info("😎嘿，大侠归来啦，开始打怪（学习）吧！", { duration: 5000 }); startTimer();
  } else {
    pauseTimer();
  }
}
onMounted(() => {
  startTimer();
  document.addEventListener("visibilitychange", handleVisibilityChange);
});
onUnmounted(() => {
  pauseTimer();
  document.removeEventListener("visibilitychange", handleVisibilityChange);
});
const timer = ref({
  hour: 0,
  minutes: 0,
  second: 0,
});
watch(seconds, (newSeconds) => {
  timer.value = getTime(newSeconds);
});
</script>
